<template>
  <div>
    <a-modal
      :visible="visible"
      title="邀请同事加入"
      @cancel="btnCancel"
      :footer="null"
    >
      <div class="box">
        {{ name }}邀请你加入团队，点击链接处理：<span id="text"
          >{{ domain }}{{ token }}</span
        >
      </div>

      <div>
        <a-button type="primary" class="copy" @click="copy">复制</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, ref, computed, watch } from "vue";
import request from "../../../../common/utils/request";
import utils from "../../../../common/utils/utils";
import store from "../../../../store";
export default defineComponent({
  name: "",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    const copy = () => {
      utils.copyText(text.innerText);
    };
    const btnCancel = () => {
      context.emit("close");
    };
    // const location = location.origin + location.pathname;
    const token = ref("");
    const domain = ref("");
    domain.value =
      location.origin + location.pathname + "#/user/login?invite_token=";
    const userInfo = computed(() => store.getters.userInfo);
    const username = ref("");
    username.value = userInfo.value;
    const name = ref();
    name.value = username.value.realname;
    const shareList = () => {
      request.get("/org", "/user/createLink").then((res) => {
        token.value = res.token;
      });
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          shareList();
        }
      }
    );
    return {
      copy,
      btnCancel,
      token,
      domain,
      name,
    };
  },
});
</script>

<style lang="less" scoped>
.copy {
  margin-top: 300px;
  margin-left: 400px;
}
.box {
  background-color: #f5f6f7;
  color: black;
  padding: 10px;
}
</style>
